<template>
  <n-config-provider
    abstract
    :theme="appConfigStore.state.darkTheme ? darkTheme : null"
    inline-theme-disabled
    :locale="zhCN"
    :theme-overrides="themeOverrides"
  >
    <n-loading-bar-provider>
      <n-message-provider>
        <WindowMounter message loadingBar>
          <RouterView></RouterView>
        </WindowMounter>
      </n-message-provider>
    </n-loading-bar-provider>
    <n-global-style />
  </n-config-provider>
</template>

<script setup lang="ts">
import { WindowMounter } from '@code4x/naive-components';
import { zhCN, type GlobalThemeOverrides, darkTheme } from 'naive-ui';
import { useLoginStore } from '@/stores/login';
import type { ILayoutUserInfo } from '@code4x/types';
import MessageContent from '@/components/MessageContent/MessageContent.vue';
import { useAppConfigStore } from '@code4x/layout';
const loginStore = useLoginStore();
const appConfigStore = useAppConfigStore();
const themeOverrides = computed<GlobalThemeOverrides>(() => {
  return {
    common: {
      primaryColor: appConfigStore.state.primaryColor,
    },
  };
});
const userInfo = computed<ILayoutUserInfo>(() => {
  const { empName, userId, account } = loginStore.userInfo;
  return {
    userName: empName as string,
    userId: userId as string,
    avatar: loginStore.userInfo?.avatar,
    account: account,
    logout: loginStore.logout,
    profilePath: '/profile',
  };
});
provide('userInfo', userInfo);
provide('MessageContent', MessageContent);
</script>
